
/**
 * this 有问题的写法
 */
import React from "react"
class Test extends React.Component {

  handler () {
    console.log(this, 'this') // undefined
    // this.setState去修改数据还可以吗？ 就会报错了

  }
  render () {
    // render函数中的this已经被react做了修正 这里的this就是指向当前组件的实例对象
    // 箭头函数中的this 直接沿用 所以也是指向组件的实例对象
    console.log(this, 'this')
    return (
      <div>
        <div></div>
        <button onClick={this.handler}>click</button>
        <br />
        {/*如果不使用 constructor做修正 直接可以在事件绑定的位置
          通过箭头函数的写法 直接沿用父函数中的this指向也是OK的
         */}
        <button onClick={() => this.handler()}>click</button>
      </div >
    )
  }
}

function App () {
  return (
    <div className="App">
      <Test></Test>
    </div>
  )
}

export default App
